<template>
	<div>
		<div class="breadcrumb_wrap">
			<span class="current">当前位置：</span>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/personalcenter' }">个人中心</el-breadcrumb-item>
				<el-breadcrumb-item>我的粉丝</el-breadcrumb-item>

			</el-breadcrumb>
			<el-button style="position: absolute; right: 10px; top: 5px" type="primary" plain size="small"
				@click="toDoctorCertify">医生认证</el-button>
		</div>

		<div class="msg_list">
			<div class="msg_item" v-for="(item,index) in fansList" :key='index' @click="handlePerson(item.userId)">
				<div class="user_line">
					<el-avatar :src="'http://124.222.236.194:8080/ruoyi-admin'+item.avatar"></el-avatar>
					<span class="user_name">
						{{item.nickName}}
						<el-tag size="mini" style="font-size: 14px; color: #25b6a0; cursor: pointer" @click="toDoctorShow(item.userId)">医生{{item.userId}}</el-tag>
					</span>
				</div>
				<div class="msg_content">{{item.description}}</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'message',
		data() {
			return {
				tabsActive: 'user',
				logo: require('@/assets/images/logo.jpg'),
				fansList: []
			}
		},
		// watch: {
		//   $route: {
		//     handler() {
		//       this.tabsActive = this.$route.query.tab;
		//     },
		//     deep: true,
		//   },
		// },
		mounted() {
			this.getFansList(this.$cookies.get('userId'));
		},
		methods: {
		  //跳转医生展示
      toDoctorShow(doctorId) {
          let link = this.$router.resolve({
            path: "/doctorShow",
            query: {doctorId: doctorId},
          });
          window.open(link.href, "_blank");

      },
        //跳转到医生认证
			toDoctorCertify() {
				this.$router.push("/doctorCertify");
			},
			async getFansList(userId) {
				const res = await this.$api.reqFansList(userId);
				// console.log(res)
				if (res.code === 200) {
					this.fansList = res.rows;
				}
			},
      async handlePerson(userId) {
        let link = this.$router.resolve({
          path: "/personalShow",
          query: {
            userId: userId,
          },
        });
        window.open(link.href, "_blank");
      },
		}
	}
</script>

<style lang="scss" scoped>
	.breadcrumb_wrap {
		width: 100%;
		height: 40px;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-left: 10px;
		box-sizing: border-box;

		.current {
			font-size: 14px;
		}
	}

	.msg_list {
		margin-top: 20px;

		.msg_item {
			background-color: #fff;
			width: 100%;
			padding: 10px;
			box-sizing: border-box; //!!!
			border-bottom: 1px solid #eee;

			&:last-child {
				border-bottom: 0;
			}

			.user_line {
				display: flex;
				align-items: center;

				.user_name {
					color: #333;
					font-size: 16px;
					margin-left: 10px;
				}

				.date {
					color: #aaa;
					font-size: 14px;
					margin-left: 14px;
				}
			}

			.msg_content {
				color: #4c4c4c;
				font-size: 14px;
				text-align: left;
				line-height: 30px;
			}
		}
	}
</style>
